<template>
  <div class="p-4.5 lg:h-full lg:flex lg:flex-col">
    <div v-if="title" class="pb-4.5 flex flex-row items-end">
      <div class="font-semibold text-2xl text-color-header mr-2">
        {{ title }}
      </div>
      <div v-if="subTitle" class="text-xs text-color-secondary">
        {{ subTitle }}
      </div>
    </div>
    <SearchForm
      v-else-if="searchFormProps"
      v-bind="searchFormProps"
      @add="$emit('add')"
      @search="$emit('search', $event)"
      @delete="$emit('delete', $event)"
    >
      <template #extraButtons>
        <slot name="extraButtons" />
      </template>
    </SearchForm>
    <div class="relative lg:flex-1 rounded-px-1 overflow-hidden">
      <div
        class="
          lg:absolute lg:top-0 lg:left-0 lg:bottom-0
          bg-white
          border-0 border-color-split border-solid
          lg:border-r
          flex flex-col
          overflow-hidden
        "
        :class="[groupSize === 'small' ? 'lg:w-80' : 'lg:w-108', groupClass]"
      >
        <div
          v-if="groupTitle"
          class="
            mx-7
            text-xl
            font-semibold
            border-0 border-b border-color-split border-solid
            h-17
            items-center
            flex flex-row
          "
          :class="groupTitleClass"
        >
          {{ groupTitle }}
        </div>
        <slot name="groupPrefix" />
        <div class="px-7 lg:flex-1 lg:overflow-auto" :class="[groupTitle ? 'py-4.5' : 'py-7', groupContentClass]">
          <slot name="group" />
        </div>
        <slot name="groupSuffix" />
      </div>
      <div class="lg:h-full bg-white lg:flex lg:flex-col" :class="[groupSize === 'small' ? 'lg:ml-80' : 'lg:ml-108']">
        <div
          v-if="hasContentTitle"
          class="
            mx-7
            text-xl
            font-semibold
            border-0 border-b border-color-split border-solid
            sm:flex sm:flex-row
            items-center
            h-17
          "
          :class="contentTitleClass"
        >
          <div class="flex-1 text-ellipsis-1 overflow-hidden" :title="contentTitle">
            <slot name="contentTitle">
              {{ contentTitle }}
            </slot>
          </div>
          <div class="py-2 sm:py-0">
            <slot name="contentTitleOper" />
          </div>
        </div>
        <slot name="content" />
      </div>
    </div>
    <slot />
  </div>
</template>
<script setup lang="ts">
import type { SearchFormProps } from "/@/types/components";
import type { ButtonProps } from "ant-design-vue";
import SearchForm from "/@/components/SearchForm.vue";

withDefaults(
  defineProps<{
    title?: string;
    subTitle?: string;
    searchFormProps?: SearchFormProps;
    groupSize?: ButtonProps["size"];
    //
    groupTitle?: string;
    groupTitleClass?: string;
    contentTitle?: string;
    contentTitleClass?: string;
    groupClass?: string;
    groupContentClass?: string;
    hasContentTitle?: boolean;
  }>(),
  {
    groupSize: "middle",
    hasContentTitle: true,
  }
);

defineEmits(["add", "search", "delete"]);
</script>
